<template>
  <div id="app-container" style="margin: 10px">

    <!--搜索input框 搜索按钮 重置按钮-->
    <el-form :inline="true" style="margin-bottom: -10px">
      <el-form-item label="用户评论">
        <el-input v-model="CommentDTO.message" size="small" placeholder="请输入评论关键字"/>
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker
          v-model="CommentDTO.createTimeStart"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"/>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="CommentDTO.createTimeEnd"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="commentInit">搜索</el-button>
        <el-button plain icon="el-icon-refresh" size="small" style="margin-left: 0" @click="hendelclear">重置</el-button>
      </el-form-item>
    </el-form>

    <!--新增、修改、删除、导出按钮-->
    <el-form :inline="true">
      <router-link to="/comment/add">
        <el-button type="primary" plain icon="el-icon-plus" size="small">添加数据</el-button>
      </router-link>
      <el-button type="danger" plain icon="el-icon-delete" size="small" style="margin-left: 0" @click="handelall">批量删除</el-button>

    </el-form>

    <!--table表格-->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"/>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (currentPage-1)*pageSize + scope.$index +1 }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="用户名"
        width="200"
        prop="name"/>
      <el-table-column
        align="center"
        label="靶场名称"
        prop="trainingName"
        width="200"
      />
      <el-table-column
        align="center"
        prop="commentParentid"
        label="评论父id"
        width="100"/>
      <el-table-column
        align="center"
        prop="rootParentid"
        label="评论根id"
        width="100"/>
      <el-table-column
        align="center"
        prop="message"
        label="评论"/>
      <el-table-column
        align="center"
        prop="createTime"
        label="创建时间"
        width="200"
        show-overflow-tooltip/>
      <el-table-column
        align="center"
        prop="updateTime"
        label="更新时间"
        width="200"
        show-overflow-tooltip/>

      <el-table-column
        align="center"
        fixed="right"
        width="150"
        label="操作">

        <template slot-scope="scope">
          <router-link :to="'/comment/update/'+scope.row.id">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
          </router-link>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="block" style="margin-top: 20px">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script>
import comment from '../../api/comment'

export default {
  data() {
    return {
      CommentDTO: {},
      tableData: [

      ],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      total: 1,

      ids: []
    }
  },
  created() {
    this.commentInit()
  },
  methods: {
    // 重置按钮
    hendelclear() {
      this.CommentDTO = {}
      this.commentInit()
    },
    // 点击批量删除，删除选中的所有数据
    handelall() {
      const ids = this.multipleSelection.map(b => b.id)

      if (this.multipleSelection.length === 0) {
        this.$message.error('请选中行，再做删除！')
        return
      }

      this.$confirm('是否确定删除？', '提示', { type: 'warning' }).then(() => {
        comment.deleteByids(ids).then(resp => {
          this.$message.success('批量删除成功')
          this.commentInit()
        })
      }).catch(() => {
        // 点击取消
        this.$message('取消删除操作！')
      })
      this.ids = []
      this.multipleSelection = []
    },

    // 初始化分页查询
    commentInit() {
      comment.Listpage(this.currentPage, this.pageSize, this.CommentDTO).then(res => {
        if (res.data != null) {
          this.tableData = res.data.data
          this.total = res.data.total
        } else {
          this.$message.error('查询失败，请联系管理员')
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    handleEdit(index, row) {
      console.log(index, row)
    },
    // 点击删除，删除数据
    handleDelete(id) {
      this.$confirm('是否确认删除', '提示删除', { type: 'warning' }).then(
        () => {
          this.ids.push(id)
          comment.deleteByids(this.ids).then(response => {
            // 提示信息
            this.$message.success('删除数据成功')
            // 重新加载数据
            this.commentInit()
            this.ids = []
          })
        }).catch()
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.commentInit()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.commentInit()
    }
  }
}
</script>
